<template>
  <div class="container">
    <!-- 计数器 -->
    <div class="but">
      <div class="text">计数器</div>
      <div class="text">{{ $store.getters["count/showCount"] }}</div>
      <!-- 增加 -->
      <div class="but_1">
        <el-button @click="add">+1</el-button>
        <el-button @click="addN">+N</el-button>
        <el-button @click="addAsync">+1 Async</el-button>
        <el-button @click="addNAsync">+N Async</el-button>
      </div>
      <!-- 减少 -->
      <div class="but_1">
        <el-button @click="sub">-1</el-button>
        <el-button @click="subN">-N</el-button>
        <el-button @click="subAsync">-1 Async</el-button>
        <el-button @click="subNAsync">-N Async</el-button>
      </div>
    </div>
    <!-- 事物清单 -->
    <div class="list">
      <div class="text">事物清单</div>
      <div style="display: flex; margin-top: 5px">
        <el-input
          placeholder="请输入任务"
          v-model="inputValue"
          style="width: 360px"
        ></el-input>
        <el-button type="primary" style="margin-left: 10px">添加事项</el-button>
      </div>
      <div>
        <el-checkbox-group v-model="list" class="list_box">
          <div v-for="item in infolist" :key="item.id" class="list_item">
            <el-checkbox label="item.done" ref="checkbox">{{
              item.info
            }}</el-checkbox>
            <el-link type="primary">删除</el-link>
          </div>
        </el-checkbox-group>
      </div>
      <div class="footer">
        <!-- <span class="footer_text"
          >{{ $store.getters["list/unDoneLength"] }}条剩余</span
        > -->
        <span class="footer_text">{{ unDoneLength }}条剩余</span>
        <el-button-group>
          <el-button
            :type="viewKey === 'all' ? 'primary' : 'default'"
            @click="changeListButton('all')"
            >全部</el-button
          >
          <el-button
            :type="viewKey === 'undone' ? 'primary' : 'default'"
            @click="changeListButton('undone')"
            >未完成</el-button
          >
          <el-button
            :type="viewKey === 'done' ? 'primary' : 'default'"
            @click="changeListButton('done')"
            >已完成</el-button
          >
        </el-button-group>
        <el-link type="primary" class="footer_text">清除已完成</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex";
export default {
  name: "PageOne",
  components: {},
  data() {
    return {
      testInfo: [{ id: 1, info: "123123测试", done: true }],
    };
  },
  created() {
    this.$store.dispatch("list/getList");
  },
  computed: {
    ...mapState({
      // list: (state) => state.list.list,
      inputValue: (state) => state.list.inputValue,
      viewKey: (state) => state.list.viewKey,
    }),
    list: {
      get() {
        return this.$store.state.list.list;
      },
      set(val) {
        return val;
      },
    },
    ...mapGetters({
      // unDoneLength: "list/unDoneLength",
      infolist: "list/infolist",
    }),
    unDoneLength: {
      get() {
        return this.$store.getters["list/unDoneLength"];
      },
      set(val) {
        return val;
      },
    },
    set(val) {
      return val;
    },
  },
  mounted() {},
  methods: {
    ...mapMutations(["add", "addN"]),
    add() {
      this.$store.commit("count/add");
      // this.add();
    },
    addN() {
      this.$store.commit("count/addN", 3);
      // this.addN(3);
    },
    addAsync() {
      this.$store.dispatch("count/addAsync");
    },
    addNAsync() {
      this.$store.dispatch("count/addNAsync", 3);
    },
    sub() {
      this.$store.commit("count/sub");
    },
    subN() {
      this.$store.commit("count/subN", 3);
    },
    subAsync() {
      this.$store.dispatch("count/subAsync");
    },
    subNAsync() {
      this.$store.dispatch("count/subNAsync", 3);
    },
    changeListButton(key) {
      // console.log(key)
      this.$store.commit("list/changeViewKey", key);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 10px;
  // display: flex;
  // flex: wrap;
  // justify-content: center;

  // 计数器
  .but {
    .text {
      font-size: 20px;
      font-weight: 600;
    }
    button {
      width: 100px;
    }
    .but_1 {
      margin: 10px 0;
    }
  }

  //事物清单
  .list {
    margin-top: 50px;
    .text {
      font-size: 20px;
      font-weight: 600;
    }
    .list_box {
      width: 360px;
      border: 1px solid rgba(220, 223, 230);
      margin-top: 5px;
      padding: 0 5px;
      .list_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .footer {
      width: 360px;
      margin-top: 5px;
      padding: 1px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid rgba(220, 223, 230);

      .footer_text {
        font-size: 12px;
      }
    }
  }
}
</style>
